import { View, Image, Input, Button, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { showToast } from '@tarojs/taro'
import { useState } from 'react'
import styles from './login.module.scss'
// 图片导入
import weichat from '../../image/3.jpg'
import QQ from '../../image/2.jpg'
import yan from '../../image/眼睛.png'
import biyan from '../../image/眼睛_隐藏.png'
import axios from 'axios';
// 需要先安装 taro-ui:
// npm install taro-ui
// 或
// yarn add taro-ui
const isH5 = process.env.TARO_ENV === 'h5'

export default function Login() {

    const [showPassword, setShowPassword] = useState(false)
    const [password, setPassword] = useState('')
    const [username, setUsername] = useState('')
    const form = { username, password };
    const handleLogin = async () => {
        try {
            const response = await axios.post('http://localhost:3000/jjk/login', {
                username: form.username,
                password: form.password
            });
            if (response.status === 200) {
                showToast({
                    title: '登录成功',
                    icon: 'success',
                    duration: 2000
                    
                });
                // 登录成功后跳转到智能首页
                Taro.navigateTo({ url: '/pages/index/index' });
            } else {
                showToast({
                    title: '登录失败',
                    icon: 'none',
                    duration: 2000
                });
            }
        } catch (err) {
            if (err.response) {
                if (err.response.status === 401) {
                    showToast({
                        title: '用户名或密码错误',
                        icon: 'none',
                        duration: 2000
                    });
                    console.log(password,username);
                    
                } else if (err.response.status === 400) {
                    showToast({
                        title: '请求参数错误',
                        icon: 'none',
                        duration: 2000
                    });
                    
                }
            } else {
                showToast({
                    title: '网络错误',
                    icon: 'none',
                    duration: 2000
                });
            }
        }
    }
    return (
        <View className={isH5 ? `${styles['login-container']} ${styles['login-h5']}` : styles['login-container']}>
            <View className={styles['login-box']}>
                <View className={styles['login-logo']}>
                    📱
                </View>
                <View className={styles['login-title']}>即时修</View>
                <View className={styles['login-subtitle']}>专业手机维修服务专家</View>
                <View className={styles['login-form']}>
                    <View className={styles['input-group']}>
                        <Input className={styles.input} type="text" placeholder="请输入账号" maxlength={11} value={username} onInput={e => setUsername(e.detail.value)} />
                    </View>
                    <View className={styles['input-group']}>
                        <Input
                            className={styles.input}
                            type="text"
                            password={!showPassword}
                            placeholder="请输入密码"
                            value={password}
                            onInput={e => setPassword(e.detail.value)}
                        />
                        <Text
                            className={styles['eye-icon']}
                            onClick={() => setShowPassword(!showPassword)}
                        >
                            {showPassword ? <Image className={styles.eye} src={biyan}></Image> : <Image className={styles.eye} src={yan}></Image>}
                        </Text>
                    </View>
                    <Button className={styles['login-btn']} onClick={handleLogin}>登录</Button>
                    <View className={styles['login-links']}>
                        <Text className={styles.link}>忘记密码?</Text>
                        <Text className={styles.link} onClick={() => Taro.navigateTo({ url: '/pages/login/emailLogin' })}>邮箱登录</Text>
                    </View>
                </View>
                <View className={styles['other-login-title']}>其他登录方式</View>
                <View className={styles['other-login']}>
                    <Image src={QQ} className={styles['other-icon']} />
                    <Image src={weichat} className={styles['other-icon']} />
                </View>
                <View className={styles['register-link']}>
                    <Text>还没有账号？</Text>
                    <Text className={styles.register} onClick={() => Taro.navigateTo({ url: '/pages/register/register' })}>立即注册</Text>
                </View>
            </View>
        </View>
    )
}